تبادل لینک هوشمند
با ویژگی alt یک متن جایگزین برای تصویر مشخص میکنیم تا تصویری که در تگ img تعریف کردیم به هر دلیلی (کم بودن سرعت اینترنت، خطا در نوشتن ویژگی src یا اینکه کاربر از یک صفحه خوان استفاده کند) نمایش داده نشد به جای تصویر، متن جایگزین نمایش داده میشود.
اگر مرورگری نتواند تصویری را نمایش دهد، متن جایگزین نمایش داده خواهد شد:
<html> <body>
<img src="notedesign.gif" alt="puyapardaz Icon"
style="width:100px;height:100px;">
</body> </html>
صفحه خوان ها
صفحه خوان برنامه ای است برا ی خواندن چیزهایی که در صفحه نمایش وجود دارند.
صفحه خوان ها برای افراد نابینا، افراد دارای اختلال در بینایی یا افراد بیسواد با کم سواد مفید هستند.
صفحه خوان ها میتونند متن داخل ویژگی alt را بخونند.
اندازه تصاویر
با بهره گیری از ویژگی style میتوانید درازا و پهنای یک تصویر را مشخص کنید.
مقادیر آنها در واحد پیکسل مشخص میشود، به این صورت که بعد از عددی که وارد میکنیم واژه px را مینویسیم.
<html> <body>
<img src="notedesign.gif" alt="puyapardaz Icon"
style="width:128px;height:128px;">
</body> </html>
یک روش دیگر هم برای اعمال درازا و پهنا بر روی تصاویر وجود دارد. در اینجا، به صورت پیش فرض مقادیر با پیکسل مشخص شده اند:
<html> <body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body> </html>
از width و height استفاده کنیم یا از style؟
هر دو روش توسط HTML5 پشتیبانی میشود.
پیشنهاد میکنیم که از ویژگی style استفاده کنید. این روش از تاثیر css ها بر روی تصاویر برای تغییر اندازه تصاویر جلوگیری میکند.
<head> <style> img {
width:100%;
} </style> </head> <body>
<img src="notedesign.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
<img src="notedesign.gif" alt="HTML5 Icon" width="128" height="128">
</body> </html>
تصاویر در پوشه های دیگر
اگر آدرس پوشه را در ویژگی src مشخص نکرده باشید مرورگر در همان پوشه ای که صفحه وب در آن است به دنبال تصویر مورد نظر میگردد.
بیشتر وقتها تصاویر در یک پوشه دیگر ذخیره میشوند. پس باید نام پوشه را هم در ویژگی src وارد نمایید.
<html> <body>
<img src="/images/notedesign.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
</body> </html>
استفاده از تصاویر بارگذاری شده بر روی یک سرور دیگر
برخی از وب سایت ها تصاویرشان را بر روی یک سرورهای تصاویر ذخیره میکنند.
در حقیقت، میتوانید به تصاویر بر روی هر آدرسی در اینترنت دسترسی داشته باشید و از آنها استفاده نمایید.
<html> <body>
<img src="http://learn.notedesign" alt="W3Schools.com"
style="width:104px;height:142px;">
</body> </html>
تصاویر انیمیشنی
از تصاویر با پسوند gif میتوان برای تصاویر انیمیشنی استفاده کرد.
<html> <body>
<p>The GIF standard allows moving images.</p>
<img src="notedesign.gif" alt="Computer man"
style="width:48px;height:48px;">
</body> </html>
توجه داشته باشید که نحوه درج تصاویر انیمیشنی تفاوتی با درج تصاویر دیگر ندارد.
استفاده از تصاویر به عنوان لینک
برای استفاده تصاویر به عنوان لینک، باید تگ <img> را درون تگ <a> ببرید.
<html> <body>
<p>The image is a link. You can click on it.</p>
<a href="puyapardaz.ir">
<img src=".jpg" alt="web site design"
style="width:42px;height:42px;border:0;"> </a></body> </html>
شناور کردن تصاویر
ویژگی float در css برای شناور کردن تصاویر بکار میرود. تصویر میتواند در سمت راست یا چپ یک متن نمایش داده شود.
نقشه تصویری
از تگ <map> برای تعریف نقشه تصویری استفاده میکنند. نقشه تصویری یک تصویر است که ناحیه های قابل کلیک دارد. و با کلیک کردن بر روی هر کدام از این ناحیه ها به صفحه ای که مشخص شده میرود. در برخی موارد نیاز هست که بیشتر از یک لینک بر روی یک تصویر قرار دهیم پس برای انجام اینکار از ویژگی usemap و عنصر <map> استفاده میکنیم. به اینصورت که در تگ <img> یک مقدار به ویژگی usemap میدهیم مانند planetmap# سپس در تگ map مقدار ویژگی name را برابر مقدار usemap تصویری که میخواهیم به صورت نقشه استفاده کنیم قرار میدهیم، مانند planetmap سپس با استفاده از عنصر area ناحیه هایی را که میخواهیم به صورت لینک نمایش داده شوند را مشخص میکنیم.
<html> <body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map>
</body> </html>
ویژگی shape شکل ناحیه را مشخص میکند مثلا میتوان دایره یا مستطیل را برایش مشخص کرد.
ویژگی coords نقاط تشکیل دادن شکل را مشخص میکند برای مستطیل چهار عدد را به عنوان نقاط تشکیل مستطیل مینویسیم و در دایره سه نقطه را برای کشیدن دایره استفاده میکنیم دو تا برای مرکز دایره و دیگری برای شعاع.
نظرات شما عزیزان:
موضوعات مرتبط: آموزش طراحی وبسایت ، ،
برچسب‌ها: